<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let arr=[10,9,8,7,6,5,4,3,2,1];
        console.log(arr);
        function bubbleSort(arr){
            let bool=true;
            let len=arr.length;
            for(let i=0;i<len-1;i++){
                bool=true;
                for(let j=0;j<len-1-i;j++){
                    if(arr[j]>arr[j+1]){
                        let tmp=arr[j];
                        arr[j]=arr[j+1];
                        arr[j+1]=tmp;
                        bool=false;
                    }
                }
                if(bool){
                    break;
                }
            }
            return arr;
        }
        console.log(bubbleSort(arr));
    </script>
</body>
</html> -->

























<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let arr=[1,2,3,4,5,6,7,8,9,10];
        console.log(arr);
        function getindex(arr,key){
            let left=0;
            let right=arr.length-1;
            while(left<=right){
                let mid=Math.floor((left+right)/2);
                if(arr[mid]==key){
                    return mid;
                }else if(arr[mid]>key){
                    right=mid-1;
                }else{
                    left=mid+1;
                }
            }
            return -1;
        }
        console.log(getindex(arr,7));
    </script>
</body>
</html> -->























<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="prev">
        <div class="top">导航栏</div>
        <div class="body">
            <div class="left">左边框</div>
            <div class="content">内容</div>
            <div class="right">有边框</div>
        </div>
    </div>
    <style>
        *{
            margin:0;
            padding: 0;
            box-sizing: border-box;
        }
        .preb{
            background-color: #666;
        }
        .top{
            color: #fff;
            background-color: red;
            text-align: center;
            height: 50px;
            line-height: 50px;
            font-size: 20px;
        }
        .body{
            display: flex;
        }
        .left,.right{
            width: 20%;
            height: 500px;
            line-height: 500px;
            background-color: green;
            color: #fff;
            font-size: 20px;
            text-align: center;
        }
        .content{
            color: #fff;
            background-color: #666;
            width: 80%;
            height:500px;
            font-size: 20px;
            line-height: 500px;
            text-align: center;
        }
    </style>
</body>
</html> -->























<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="prev">
        <div class="red">

        </div>
        <div class="green">

        </div>
        <div class="yellow">

        </div>
    </div>
    <style>
        *{
            margin:0;
            padding:0;
            box-sizing: border-box;
        }
        .prev{
            width: 200px;
            height:600px;
            margin:0 auto;
            background-color: #666;
            padding: 25px;
        }
        .red{
            width: 150px;
            height: 150px;
            border-radius:50%;
            background-color: red;
        }
        .green{
            width: 150px;
            height:150px;
            border-radius:50%;
            background-color: green;
            margin-top: 50px;
        }
        .yellow{
            width: 150px;
            height: 150px;
            border-radius:50%;
            margin-top: 50px;
            background-color: yellow;
        }
    </style>
</body>
</html> -->





















<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table width="400px" border="1px" cellspacing=0>
        <tr class="one">
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr class="two">
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr class="three">
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </table>
    <style>
        table,td{
            text-align: center;
        }
        .one{
            color: red;
            text-decoration: underline;
        }
        .two{
            color:green;
            text-decoration: line-through;
        }
        .three{
            color: blue;
            font-weight: 900;
        }
    </style>
</body>
</html> -->





















<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>待办事项</title>
</head>
<body>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .nav{
            width: 600px;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .nav input{
            width: 450px;
            height: 50px;
            font-size: 25px;
            padding-left: 10px;
        }
        .nav button{
            width: 150px;
            height: 50px;
            border: none;
            background-color: orange;
            color:#fff;
            font-size: 18px;
        }
        .nav button:active{
            background-color: #666;
        }
        .container{
            width: 600px;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            padding-top: 10px;
        }
        .container .left,.container .right{
            width: 50%;
        }
        .container .left h3,.container .right h3{
            text-align: center;
            height: 50px;
            line-height: 50px;
            background-color: #000;
            color:#fff;
        }
        .container .row{
            height: 50px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }
        .container .row span{
            width: 230px;
        }
        .container .row button{
            width: 40px;
            height:30px;
        }
        .container .row input{
            margin-right: 5px;
        }
    </style>
    <div class="nav">
        <input type="text">
        <button>新建任务</button>
    </div>
    <div class="container">
        <div class="left">
            <h3>未完成</h3>
        </div>
        <div class="right">
            <h3>已完成</h3>
        </div>
    </div>
    <script>
        let addTaskBtn=document.querySelector('.nav button');
        addTaskBtn.onclick=function(){
            let input=document.querySelector('.nav input');
            let taskContent=input.value;
            let row=document.createElement('div');
            row.className='row';
            let checkbox=document.createElement('input')
            checkbox.type='checkbox';
            let span=document.createElement('span');
            span.innerHTML=taskContent;
            let delet=document.createElement('button');
            delet.innerHTML='删除';
            row.appendChild(checkbox);
            row.appendChild(span);
            row.appendChild(delet);
            let left=document.querySelector('.left');
            left.appendChild(row);
            let a=document.querySelector('.nav input');
            a.value='';
            checkbox.onclick=function(){
                let target=checkbox.checked?document.querySelector('.right'):document.querySelector('.left');
                target.appendChild(row);
            }
            delet.onclick=function(){
                let parent=row.parentNode;
                parent.removeChild(row);
            }
        }
    </script>
</body>
</html> -->
































<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表白墙</title>
</head>
<body>
    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        .container{
            width: 600px;
            margin:0 auto;
        }
        h1{
            text-align: center;
            padding:20px 0px;
        }
        p{
            font-size: 15px;
            color: #666;
            text-align: center;
            padding: 10px 0px;
        }
        .row{
            display: flex;
            height: 40px;
            justify-content: center;
            align-items: center;
        }
        .row span{
            width: 100px;
        }
        .row .edit{
            width: 200px;
            height: 36px;
        }
        .row .one{
            width: 300px;
            height: 40px;  
            background-color: rgb(110,249,164);
            color: #fff;
            border: none;
        }
        .row .one:active{
            background-color: #666;
        }
    </style>
    <div class="container">
        <h1>表白墙</h1>
        <p>输入后点击提交，会将信息显示在表格中。</p>
        <div class="row">
            <span>谁：</span>
            <input stpe="text" class="edit">
        </div>
        <div class="row">
            <span>对谁：</span>
            <input type="text" class="edit">
        </div>
        <div class="row">
            <span>说什么：</span>
            <input type="text" class="edit">
        </div>
        <div class="row">
            <input type="button" value="提交" class="one">
        </div>
    </div>

    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

    <script>
        let one=document.querySelector('.one');
        one.onclick=function(){
            let arr=document.querySelectorAll('.edit');
            let me=arr[0].value;
            let to=arr[1].value;
            let message=arr[2].value;
            if(me==''||to==''||message==''){
                return;
            }

            console.log(me+","+to+","+message);
            let div=document.createElement('div');
            div.className='row';
            div.innerHTML=me+"对"+to+"说："+message;

            let container=document.querySelector('.container');
            container.appendChild(div);

            for(let i=0;i<arr.length;i++){
                arr[i].value='';
            }

            let body={
                from:me,
                to:to,
                message:message
            }
            $.ajax({
                url:'message',
                method:'post',
                contentType:"application/json;charset=utf8",
                data:JSON.stringify(body),
                success:function(data,status){
                    container.log(data);
                }
            })
        }

        function load(){
            $.ajax({
                method:"get",
                url:"message", 
                success:function(data,status){
                    let container=document.querySelector('.container');
                    for(let message of data){
                        let row=document.createElement('div');
                        row.className='row';
                        row.innerHTML=message.from+"对"+message.to+"说:"+message.message;
                        container.append(row);
                    }
                }
            })
        }
        load();
    </script>

</body>
</html>























<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜数字游戏</title>
</head>
<body>
    <input type="button" value="重新开始游戏" id="reset">
    <div>
        <span>请输入要猜的数字：</span>
        <input type="text" id="num">
        <input type="button" value="确定" id="guess">
    </div>
    <div>
        <span>已经猜的次数：</span>
        <span id="count">0</span>
    </div>
    <div>
        <span>结果：</span>
        <span id="sum"></span>
    </div>
    <script>
        let reset=document.querySelector('#reset');
        let nums=document.querySelector('#num');
        let guess=document.querySelector('#guess');
        let counts=document.querySelector('#count');
        let sum=document.querySelector('#sum');
        let random=Math.floor(Math.random()*100)+1;
        let count=0;
        guess.onclick=function(){
            count++;
            counts.innerHTML=count;
            let num=parseInt(nums.value);
            if(num<random){
                sum.innerHTML="猜低了";
                sum.style.color="red";
            }else if(num>random){
                sum.innerHTML="猜高了";
                sum.style.color="blue";
            }else{
                sum.innerHTML="猜对了";
                sum.style.color="green";
            }
        }
        reset.onclick=function(){
            random=Math.floor(Math.random()*100)+1;
            nums.value="";
            counts.innerHTML="0";
            sum.innerHTML="";
            count=0;
            
        }
    </script>
</body>
</html> -->




























<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>夜间模式转换</title>
</head>
<body>
    <style>
        .light{
            background-color: #fff;
            color: #000;
        }
        .dack{
            background-color: #666;
            color: #eee;
        }
    </style>
    <div class="light">
        这是一段话。<br>
        这是一段话。<br>
        这是一段话。<br>
        这是一段话。<br>
        这是一段话。<br>
    </div>
    <script>
        let div=document.querySelector('div');
        div.onclick=function(){
            div.className=div.className=='light'?'dack':'light';
        }
    </script>
</body>
</html> -->






<!-- <body>
    <p>其实我也有过特别想自杀的时候，但我知道我的肉体从脱离娘胎就注定不是我一人所有，
    我已经没有对他作出主观处理的权力了，<br>他连带了一些责任和义务来到这个世上，
    注定要留下一些什么——那就是一种精神。什么样的肉体留下什么样的精神，就看你自己的选择了。</p>
 
    　<p>人与人之间真心的沟通真的好难，<br>你无法左右别人的思想，
        还要设法了解他的喜好而投其所好，对那些专心作学问，把学问看的比什么都重要的学者来说。
        尤其是那些偾事嫉俗，刚正不阿者，他们怎么会知道有一类人叫小人，小人是惯用一些卑鄙下作的手段做杀人不见血的软刀子呢？</p>　
</body> -->





<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线填写简历</title>
</head>
<body>
    <table width="600px" cellspacing="0">
        <thead>
            <h1>请填写简历信息</h1>
        </thead>
        <tbody>
            <tr>
                <td>
                    <label for="name">姓名：</label>
                </td>
                <td>
                    <input type="text" id="name">
                
                </td>
            </tr>
            <tr>
                <td>
                    性别：
                </td>
                <td>
                    <input type="radio" id="male" name="gender" checked="checked">
                    <label for="male">
                        <img src="男.png" alt="" width="15px">
                        男
                    </label>
                    <input type="radio" id="female" name="gender">
                    <label for="female">
                        <img src="女.png" alt="" width="15px">
                        女
                    </label>
                </td>
            </tr>
            <tr>
                <td>
                    出生日期：
                </td>
                <td>
                    <select>
                        <option>请选择年份</option>
                        <option>1995</option>
                        <option>1996</option>
                        <option>1997</option>
                        <option>1998</option>
                        <option>1999</option>
                        <option>2000</option>
                    </select>
                    <select>
                        <option>请选择月份</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                        <option>6</option>
                        <option>7</option>
                        <option>8</option>
                        <option>9</option>
                        <option>10</option>
                        <option>11</option>
                        <option>12</option>
                    </select>
                    <select>
                        <option>请选择日期</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                        <option>6</option>
                        <option>7</option>
                        <option>8</option>
                        <option>9</option>
                        <option>10</option>
                        <option>11</option>
                        <option>12</option>
                        <option>13</option>
                        <option>14</option>
                        <option>15</option>
                        <option>16</option>
                        <option>17</option>
                        <option>18</option>
                        <option>19</option>
                        <option>20</option>
                        <option>21</option>
                        <option>22</option>
                        <option>23</option>
                        <option>24</option>
                        <option>25</option>
                        <option>26</option>
                        <option>27</option>
                        <option>28</option>
                        <option>29</option>
                        <option>30</option>
                        <option>31</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    就读学校：
                </td>
                <td>
                    <input type="text">
                </td>
            </tr>
            <tr>
                <td>
                    应聘的岗位：
                </td>
                <td>
                    <input type="checkbox" id="front">
                    <label for="front">
                        <img src="前端.png" width="10px">
                        前端开发
                    </label>
                    <input type="checkbox" id="backend">
                    <label for="backend">
                        <img src="后端.png" width="10px">
                        后端开发
                    </label>
                    <input type="checkbox" id="qa">
                    <label for="qa">
                        <img src="测试.png" width="10px">
                        测试开发
                    </label>
                    <input type="checkbox" id="op">
                    <label for="op">
                        <img src="运维.png" width="10px">
                        运维开发
                    </label>
                </td>
            </tr>
            <tr>
                <td>
                    掌握的技能：
                </td>
                <td>
                    <textarea cols="30" rows="10"></textarea>
                </td>
            </tr>
            <tr>
                <td>
                    做过的项目：
                </td>
                <td>
                    <textarea cols="30" rows="10"></textarea>
                </td>
            </tr>
            <tr>
                <td>
                </td>
                <td>
                    <input type="checkbox" id="lisence">
                    <label for="lisence">我已经仔细阅读了公司的招聘要求</label>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <a href="#">查看我的状态</a>
                </td>
            </tr>
            <tr>
                <td>
                </td>
                <td>
                    <ul>
                        <h2>请求应聘者确认：</h2>
                        <li>以上信息真实有效</li>
                        <li>能够尽早来公司实习</li>
                        <li>能够接受公司的加班文化</li>
                    </ul>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html> -->


















<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <title>个人简历</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>张*楠</h1>
    下面是基础信息
    <h2>基本信息</h2>
    <img src="5.jpg" alt="照片" height="200px">
    <p>
        <span>求职意向：</span>
        <span>英语笔译教师</span>
    </p>
    <p>
        <span>练习电话：</span>
        <span>181****2101</span>
    </p>
    <p>
        <span>邮箱：</span>
        <span>119.@qq.com</span>
    </p>
    <p>
        <a href="https://user.qzone.qq.com/1398830857?ADUIN=2225419639&ADSESSION=1642467676&ADTAG=CLIENT.QQ.5845_FriendTip.0&ADPUBNO=27178&source=namecardhoverstar">我的QQ空间</a>
    </p>
    <h2>教育背景</h2>
    <ol>
        <li>2000-2003 小葵花幼儿园</li>
        <li>2004-2010 小葵花小学</li>
        <li>2010-2013 小葵花中学</li>
        <li>2013-2016 小葵花高中</li>
        <li>2016-2020 牡丹江大学</li>
        <li>2020-2022 黑龙江大学</li>
    </ol>
    <h2>
        <span>学历：</span>
        <span>硕士</span>
    </h2>
    <h2>专业技能</h2>
    <ul>
        <li>熟练掌握口语等相关知识</li>
        <li>熟练翻译英语文章</li>
        <li>可以用英语无障碍沟通</li>
        <li>熟悉使用10万个英语单词</li>
    </ul>
    <h2>相关经历</h2>
    <ol>
        <li>
            <h3>家教</h3>
            <p>工作时间：2021年6月—2022年1月</p>
            <p>工作内容：</p>
            <ul>
                <li>1对1辅导</li>
                <li>辅导对象学习成绩提高明显</li>
            </ul>
        </li>
        <li>
            <h3>论文</h3>
            <p>完成时间：2021年1月—2022年6月</p>
            <p>论文内容:</p>
            <ul>
                <li>家庭暴力相关英语翻译</li>
                <li>历史相关英语翻译</li>
            </ul>
        </li>
    </ol>
    <h2>个人评价：</h2>
    <p>在校期间，成绩优秀，多次获得奖学金，与导师合作多次翻译活动，得到导师嘉奖多次。</p>
</body>
</html> -->









<!-- <html>
    <head>
        <title>不给你看</title>
    </head>
    <body>
        <b>
            <h1>这是我和我的宝贝</h1>
        </b>
        <h1>👇👇👇👇👇👇👇👇👇👇👇👇</h1>
        <img src="baby.jpg">
    </body>
</html> -->